<template>
  <div class="mainR">
    <div class="main-wrap">
      <div class="topWrap" v-if="bannerFlag">
        <div class="topAdvise">
          <div class="topAdviseWrap">
            <div class="title">
              <p class="title">在 Uknow，学习技能、解决问题</p>
              <span class="title2">欢迎来到知否社区,本站建立初期仅供个人娱乐 如有雷同纯属巧合!</span>
            </div>
            <div class="loginBtn">
              <div class="login btn">免费注册</div>
              <div class="regB btn">立即登录</div>
            </div>
            <div class="close" @click="bannerFlag=false">x</div>
          </div>
        </div>
      </div>
      <main class="container">
        <div class="main-left">
          <ul>
            <li
              v-for="(item,index) of class1"
              :class="{linkActive:linkFlag==index}"
              :key="index"
              @click="checkClassles(index,item.cName)"
            >
              <i v-html="item.cFont"></i>
              {{item.cName}}
            </li>
          </ul>
          <el-divider content-position="left">已开放社区</el-divider>
          <ul>
            <li
              v-for="(item,index) of class2.slice(3)"
              :class="{linkActive:linkFlag==item.id}"
              @click="checkClassles(item.id,item.cName)"
              :key="index"
            >
              <i v-html="item.cFont"></i>
              {{item.cName}}
            </li>
          </ul>
          <el-divider content-position="left">暂未开放</el-divider>
          <ul ref="linkLeft">
            <li>
              <i class="iconfont">&#xe6a7;</i> 精华
            </li>
            <li>
              <i class="iconfont">&#xe616;</i> 分享
            </li>
            <li>
              <i class="iconfont">&#xe65d;</i> 文章
            </li>
            <li>
              <i class="iconfont">&#xe602;</i> 更多标签
            </li>
          </ul>
        </div>
        <div class="main-center">
          <div class="MenuItemWrap" ref="MenuItemWrap">
            <div class="MenuItem">
              <div
                class="Mitem"
                :class="{menuActiveMini:item.id==linkFlagMini}"
                v-for="item of classMini"
                :key="item.id"
                @click="checkClasslesMini(item.id,item.cName)"
              >
                <i v-html="item.cFont"></i>
                {{item.cName}}
              </div>
            </div>
          </div>
          <div class="swiper-center">
            <div class="block">
              <el-carousel height="150px" arrow="never">
                <el-carousel-item v-for="item in imgDta" :key="item">
                  <img :src="item" class="swiperIMG" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <h3>{{titleName}}</h3>
          <h3 class="miniH3">{{titleNameMini}}</h3>
          <el-divider></el-divider>
          <div
            v-infinite-scroll="loadMore"
            :infinite-scroll-disabled="$store.state.scrollBusy"
            infinite-scroll-distance="10"
            v-loading='!blogListLoad.length'
          >
            <div class="item" v-for="(item,index) of blogListLoad" :key="index" >
              <div class="left">
                <h4 @click="sendArtTitle(item.TTopic)">
                  <router-link
                    :to="{name:'article',params:{tid:item.tid,clickcount:item.TClickCoount}}"
                  >{{item.TTopic}}</router-link>
                </h4>
                <div class="content">{{ToText(item.TContent)}}</div>
                <div class="info">
                  <div class="infoWrap" @click="setGood(item.tid,index)">
                    <span class="goodWrap" :class="{'goodUser':isGood(item.tid)}">
                      <i class="iconfont">&#xe62b;</i>
                    </span>
                    <span style="color:#009a61">
                      <strong style="font-size:15px">×</strong>
                      <span style="font-size:14px">{{ item.Tgood}}</span>
                    </span>
                    ·
                    <span v-if="isGood(item.tid)">已</span>赞
                  </div>
                  <div class="userImg">
                    <img :src="item.UHead" alt />
                  </div>
                  {{item.UserName }}
                  <i class="iconfont author">&#xe603;</i>
                  <span class="SendTime">·{{item.TTime}}</span>
                </div>
              </div>
              <div class="right" v-if="getImg(item.TContent)">
                <div
                  class="img"
                  :style="{background: 'url(' + getImg(item.TContent) + ') center center /cover ',width:'80px',height:'60px'}"
                ></div>
              </div>
            </div>
          </div>
          <div class="loading" v-loading="loading">
            <span v-if="!loading">没有更多数据了···</span>
          </div>
        </div>
        <div class="main-right">
          <div class="advisement Rside" ref="advert">
            <scroll />
          </div>
          <el-divider content-position="left">个人名片</el-divider>
          <div class="user-info" v-show="user.UID">
            <div class="right-user Rside">
              <div class="userInfo">
                <div class="img">
                  <img :src="user.UHead" alt />
                </div>
                <span>{{user.UserName}}</span>
                <i class="iconfont">&#xe600;</i>
              </div>
              <div class="score">积分：{{user.UPoint}}</div>
              <span>“ 这家伙很懒，什么个性签名都没有留下。 ”</span>
            </div>
          </div>
          <div class="sendBtn-wrap Rside">
            <div class="btn" @click="$router.push({name:'sendblog'})">发布新话题</div>
          </div>
          <el-divider content-position="left">站内用户</el-divider>
          <!-- <div class="bottom">
            <div class="title">
              <span>最近活跃</span>
              <span @click="rorateGo">
                <i class="iconfont" :class="rorate">&#xe611;</i>换一批
              </span>
            </div>
            <ul>
              <li>
                <div class="img"></div>
                <div class="info">
                  <h4>作者</h4>
                  <span>写了100字 120喜欢</span>
                </div>
                <div class="btn">+ 关注</div>
              </li>
              <li>
                <div class="img"></div>
                <div class="info">
                  <h4>作者</h4>
                  <span>写了100字 120喜欢</span>
                </div>
                <div class="btn">+ 关注</div>
              </li>
            </ul>
            <div class="btn-more">
              查看全部
              <span>></span>
            </div>
          </div>-->
        </div>
        <el-backtop :bottom="100" :visibility-height="100">up</el-backtop>
      </main>
    </div>
  </div>
</template>

<script>
import { format } from "../common/time";
import scroll from "../components/scrollNotify";
// // import { getUserL } from "../common/mixin";
// import { loginUtil } from "../common/loginUtil";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      rorateFlag: false,
      imgDta: [
        "https://image-static.segmentfault.com/226/834/226834628-5e6f46a4d8155",
        "https://image-static.segmentfault.com/287/213/2872137245-5e79c221c9816",
        "https://image-static.segmentfault.com/184/899/1848991972-5d54e96a73988"
      ],
      // 帖子数据
      blogList: [],
      blogListLoad: [],
      class1: [
        {
          cName: "最新内容",
          cFont: '<i class="iconfont">&#xe667;</i>'
        },
        {
          cName: "热门内容",
          cFont: '<i class="iconfont">&#xe642;</i>'
        },
        {
          cName: "为你推荐",
          cFont: "<i class='iconfont'>&#xe605;</i>"
        }
      ],
      class2: [
        "",
        "",
        "",
        {
          cName: "全部",
          cFont: " <i class='iconfont' style='color:#ffc107'>&#xe63a;</i>",
          id: 3
        },
        {
          cName: "分享",
          cFont: "<i class='iconfont'  style='color:#8c5827'>&#xe609;</i>",
          id: 4
        },
        {
          cName: "精华",
          cFont: "<i class='iconfont'  style='color:#2196f3'>&#xe605;</i>",
          id: 5
        },
        {
          cName: "问答互助",
          cFont: "<i class='iconfont' style='color:#4a91e5'>&#xe722;</i>",
          id: 6
        },
        {
          cName: "测试专区",
          cFont: "<i class='iconfont' style='color:#009a61'>&#xe6d0;</i>",
          id: 7
        }
      ],
      classMini: [
        {
          cName: "最新内容",
          cFont: "<i class='iconfont'  style='color:#2196f3'>&#xe695;</i>",
          id: 0
        },
        {
          cName: "分享专区",
          cFont: "<i class='iconfont' style='color:#76c451'>&#xe722;</i>",
          id: 1
        },
        {
          cName: "精华推荐",
          cFont: "<i class='iconfont' style='color:#2196f3'>&#xe605;</i>",
          id: 2
        },
        {
          cName: "更多频道",
          cFont: "<i class='iconfont' style='color:#009a61'>&#xe602;</i>",
          id: 99
        },
        {
          cName: "测试专区",
          cFont: "<i class='iconfont' style='color:#faef66'>&#xe6d0;</i>",
          id: 3
        }
      ],
      linkFlag: 0,
      linkFlagMini: 0,
      loadCount: 6,
      loading: false,
      titleName: "最新内容",
      titleNameMini: "最新内容",
      busy: "",
      bannerFlag: true,
      arr: []
    };
  },
  // mixins: [getUserL],
  created() {
    this._getBlogList();
  },
  mounted() {
    // 左边link
    this.$refs.linkLeft.addEventListener("click", this.help);
    // header i 点击
    // mimiMenu
    this.$refs.MenuItemWrap.addEventListener("click", e => {
      if (e.target.innerHTML.indexOf("更多频道") != -1) {
        this.showMoreMenu();
      }
    });
    if (this.user.UID) {
      this.bannerFlag = false;
    }
  },
  destroyed() {},
  methods: {
    sendArtTitle(TTopic) {
      this.$store.commit("setTopTitle", TTopic);
    },
    // 拿所有帖子
    async _getBlogList(tuid, tsid, key) {
      this.blogList.length = 0;
      let url = "public/all";

      if (tsid) url += `?tsid=${tsid}`;
      else if (tuid) url += `?tuid=${tuid}`;
      else if (key) url += `?keyword=${key}`;
      else url = "public/all";

      const res = await this.$http.get(url);

      if (res.errno !== 0) {
        return;
      }
      if (res.errno == 0) {
        this.blogList = res.data;
        this.blogListLoad = this.blogList.slice(0, this.loadCount);
        // 处理时间
        this.blogList.forEach((item, index) => {
          let time = new Date(item.TTime);
          let nowTime = new Date();
          let month = time.getMonth() + 1 + "月";
          let date = time.getDate() + "日";
          let date2 = time.getDate();
          let nowDay = nowTime.getDate();
          let hour = time.getHours();
          let minute = time.getMinutes();

          let delta = new Date().getTime() - new Date(item.TTime).getTime();
          if (delta < 24 * 60 * 60 * 1000 && nowDay == date2) {
            // 如果是今天发的 格式为 今天15.05
            // 补0
            minute = minute.toString().replace(/^(\d)$/, "0$1");
            item.TTime = `今天 ${hour}:${minute}`;
          } else {
            // 否则为 1月20号
            item.TTime = [month, date].join("");
          }
        });
      }
    },
    checkClassles(index, titleName) {
      this.titleName = titleName;
      this.linkFlag = index;
      if (index == 0) {
        this._getBlogList();
        return;
      }
      if (index >= 3) {
        index = index - 3;
      }
      this._getBlogList("", index);
    },
    checkClasslesMini(id, title) {
      this.linkFlagMini = id;
      this.titleNameMini = title;
      if (id == 99) {
        return;
      }
      this._getBlogList("", id);
    },
    rorateGo() {
      this.rorateFlag = !this.rorateFlag;
      setTimeout(() => {
        this.rorateFlag = !this.rorateFlag;
      }, 500);
    },
    loadMore() {
      this.loadCount += 6;
      setTimeout(() => {
        if (this.loadCount > this.blogList.length) {
          this.blogListLoad = this.blogList.slice(0);
          this.loading = false;
          return;
        }
        this.blogListLoad = this.blogList.slice(0, this.loadCount);
      }, 1000);
    },
    help(e) {
      if (e.target.nodeName.toLowerCase() == "li") {
        this.$notify({
          title: "",
          message: "暂未开放",
          position: "top-left",
          type: "warning",
          left: 200
        });
      }
      if (e.target.nodeName.toLowerCase() == "img") {
        this.$notify({
          title: "广告·····",
          message: "我是广告",
          position: "top-left",
          left: 200
        });
      }
    },
    // html=>纯文本
    ToText(HTML) {
      let input = HTML;
      return input
        .replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, "")
        .replace(/<[^>]+?>/g, "")
        .replace(/\s+/g, " ")
        .replace(/ /g, " ")
        .replace(/>/g, " ");
    },
    // html 取src
    getImg(HTML) {
      let str = HTML;
      //获取img 标签
      let letter = str.match(/<img\s*src=\"([^\"]*?)\"[^>]*>/gi);
      let reg = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
      if (letter) {
        return letter[0].replace(reg, "$1");
      } else {
        return false;
      }
    },
    showMoreMenu() {
      if (
        this.$refs.MenuItemWrap &&
        this.$refs.MenuItemWrap.style.height == "70px"
      ) {
        this.$refs.MenuItemWrap.style.height = "35px";
      } else {
        this.$refs.MenuItemWrap.style.height = "70px";
      }
    },
    async setGood(tid, index) {
      // 提交服务器
      const res = await this.$http.post("blog/good", {
        tid: tid,
        uid: this.user.UID
      });
      if (res.errno == 0) {
        if (res.code == 0) {
          this.blogListLoad[index].Tgood += 1;
          this.addUserArt(tid);
        } else {
          this.delUserArt(tid);
          this.blogListLoad[index].Tgood -= 1;
        }
      } else {
        this.$message.warning("数据异常");
      }
    },
    isGood(tid) {
      if (this.user.UID == 0) return;
      if (this.user.goodArticle == undefined) {
        return;
      }
      return this.user.goodArticle.some(item => {
        return item == tid;
      });
    },
    ...mapActions(["addUserArt", "delUserArt"])
  },
  computed: {
    rorate() {
      return this.rorateFlag ? "play" : "pause";
    },
    ...mapGetters({
      user: "getUser"
    })
  },
  watch: {
    "$store.state.searchKey": function(newFlag, oldFlag) {
      // 需要执行的代码
      if (newFlag) {
        this._getBlogList("", "", newFlag);
      }
    }
  },
  components: {
    scroll
  }
};
</script>

<style lang='scss' >
@media screen and(max-width: 1268px) {
  .topWrap {
    display: none !important;
  }
  main {
    width: 968px !important;
    .main-left {
      flex: 1 !important;
    }
    .main-center {
      flex: 4 !important;
    }
    .main-right {
      display: none !important;
    }
  }
}
@media screen and(max-width: 994px) {
  main {
    width: 750px !important;
    margin: 0 auto !important;
    margin-top: 80px !important;
    .main-left {
      display: none !important;
    }
    .main-center {
      flex: 1 !important;
      h4 {
        font-size: 18px !important;
      }
      .content {
        max-width: 400px !important;
      }
    }
  }
}
@media screen and(max-width: 500px) {
  main {
    width: 100% !important;
    .main-center {
      .MenuItemWrap {
        display: block !important;
      }
      h3 {
        display: none;
      }
      .miniH3 {
        display: block !important;
      }
      .el-carousel__container {
        height: 80px !important;
      }
      // .content {
      //   // max-width: 300px !important;
      // }
    }
    .el-backtop {
      display: none;
    }
  }
}
.main-wrap {
  .topWrap {
    margin-top: 63px;
    width: 100%;
    height: 130px;
    position: relative;
    .topAdvise {
      position: absolute;
      height: 190px;
      left: 0;
      right: 0;
      background: url("") no-repeat top center;
      background-color: #009a61;
      .topAdviseWrap {
        width: 1140px;
        height: 100%;
        margin: 0 auto;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          p {
            margin-bottom: 20px;
            font-size: 30px;
          }
        }
        .loginBtn {
          display: flex;
          font-size: px;
          .btn {
            width: 106px;
            height: 45px;
            background: #fff;
            color: #009a61;
            margin-left: 15px;
            text-align: center;
            line-height: 45px;
            border-radius: 5px;
          }
          .regB {
            border: 1px solid #fafafa;
            background: #009a61;
            color: white;
          }
        }
      }
      .close {
        text-align: center;
        width: 20px;
        height: 20px;
        background: rgba($color: #fafafa, $alpha: 0.4);
        position: absolute;
        right: 18px;
        top: 18px;
        border-radius: 50%;
        cursor: pointer;
        font-weight: bolder;
        color: #009a61;
      }
    }
  }
  main {
    width: 1140px;
    margin: 0 auto;
    margin-top: 96px;
    display: flex;
    background: white;
    .main-left {
      flex: 1;
      align-self: start;
      padding: 0px 10px 0;
      box-sizing: border-box;
      font-size: 16px;
      ul {
        li {
          height: 34px;
          line-height: 34px;
          cursor: pointer;
          border-radius: 2px;
          i {
            margin: 0 5px;
          }
          &:hover {
            background: rgba(0, 154, 97, 0.08);
          }
        }
        .linkActive {
          background: #009a61;
          color: white;
          font-weight: bold;
          pointer-events: none;
          i {
            color: white !important;
            // !important
          }
        }
      }
    }
    .main-center {
      flex: 3.5;
      margin: 0 15px;
      .MenuItemWrap {
        display: none;
        height: 35px;
        margin: 0 0 10px 0;
        overflow: hidden;
        .MenuItem {
          display: flex;
          flex-wrap: wrap;
          .Mitem {
            width: 25%;
            line-height: 25px;
            text-align: center;
            box-sizing: border-box;
            font-size: 12px;
            padding: 3px;
            border-radius: 3px;
          }
          .menuActiveMini {
            background: #009a61;
            color: white;
            i {
              color: white !important;
            }
          }
        }
      }

      .swiper-center {
        border-radius: 3px;
        margin-bottom: 10px;
        .el-carousel--horizontal {
          border-radius: 3px;
        }
        img {
          height: 100%;
          width: 100%;
        }
      }
      .miniH3 {
        display: none;
      }
      .el-divider--horizontal {
        margin-top: 15px;
      }
      .el-loading-spinner {
        top: 10%;
      }
      .item {
        display: flex;
        margin: 25px 0;
        .left {
          flex: 3;
          h4 {
            font-weight: normal;
            a {
              color: #212121;
              text-decoration: none;
            }
          }

          .content {
            line-height: 24px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            margin: 10px 0;
            overflow: hidden;
            color: #b2a2a7;
          }
          .info {
            display: flex;
            align-items: center;
            font-size: 11px;
            .infoWrap {
              cursor: pointer;
              margin-right: 15px;
              font-size: 12px;
              i {
                color: #009a61;
              }
              .goodWrap {
                display: inline-block;
                height: 25px;
                width: 25px;
                line-height: 25px;
                background: red;
                text-align: center;
                border-radius: 50%;
                background: #ebf5f3;
                i {
                  font-size: 16px;
                }
              }
              .goodUser {
                background: #009a61;
                i {
                  color: white;
                }
              }
            }
            .userImg {
              width: 20px;
              height: 20px;
              margin: 0 8px 0 10px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .author {
              color: #f5a623;
              font-size: 20px;
            }
            .SendTime {
              color: #9e9e9e;
              font-size: 13px;
            }
          }
        }
        .right {
          margin-left: 25px;
          width: 80px;
          height: 60px;
          .img {
            border-radius: 4px;
          }
        }
      }
      .loading {
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        color: rosybrown;
      }
    }
    .main-right {
      flex: 1.5;
      box-sizing: border-box;
      padding: 0px 0 0 25px;
      .user-info {
        background: #fafafa;
        border-radius: 3px;
        box-shadow: 0 0 3px #e1e1e1;
        .right-user {
          box-sizing: border-box;
          padding: 10px;
          .userInfo {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .img {
              margin-right: 10px;
              width: 48px;
              height: 48px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
              }
            }
            .iconfont {
              color: #ffc107;
            }
          }
          .score {
            margin: 15px 0 5px 0;
            color: #009a61;
          }
        }
      }

      .sendBtn-wrap {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 10px;
        background-color: #fafafa;
        margin-bottom: 15px;
        border-radius: 3px;
        box-shadow: 0 0 3px #e1e1e1;
        border-top: 1px solid #eeee;
        .btn {
          text-align: center;
          line-height: 34px;
          font-size: 14px;
          color: white;
          width: 80px;
          height: 34px;
          background-color: #009a61;
          border-radius: 5px;
          cursor: pointer;
        }
      }
      .advisement {
        .advert {
          width: 270px;
          height: 65px;
          background: violet;
          margin-bottom: 10px;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
      }
      .bottom {
        background: #fafafa;
        padding: 8px;
        box-sizing: border-box;
        border-radius: 5px;
        .title {
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          i {
            display: inline-block;
            &.play {
              animation: rotate 0.5s;
            }
          }
        }
        ul {
          li {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin: 10px 0;
            font-size: 14px;
            .img {
              width: 48px;
              height: 48px;
              background: olive;
              border-radius: 50%;
              margin-right: 10px;
            }
            .info {
              h4 {
                margin-bottom: 5px;
              }
            }
            .btn {
              margin-left: auto;
              color: #009a61;
              font-size: 12px;
              cursor: pointer;
            }
          }
        }
        .btn-more {
          width: 100%;
          border: 1px solid #eeeeee;
          background: #eeeeee;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 5px;
          margin-top: 15px;
          cursor: pointer;
          &:hover {
            background: #009a61;
            color: white;
          }
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>